<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>vue-表单 input 绑定</title>
		<script src="../js/vue.js"></script>
		<style>
			
		</style>
	</head>
	<body>

		<div class="test-08">
			<input v-model="message1" placeholder="输入试一试"/>
			<p>显示内容：{{message1}}</p>
			
			<br/>
			<textarea v-model="message2" placeholder="多行输入显示"></textarea>
			<br/>
			<span>显示内容:</span><p style="white-space: pre-line;">{{message2}}</p>
			
			<br/>
			<input type="checkbox" id="check" name="check" v-model="checked"/>
			<label for="check">选择</label>
			
			<br/>
			<input type="checkbox" name="a" id="a" value="a" v-model="checkArr"/>
			<label for="a">a </label>
			<input type="checkbox" name="b" id="b" value="b" v-model="checkArr"/>
			<label for="b">b </label>
			<input type="checkbox" name="c" id="c" value="c" v-model="checkArr"/>
			<label for="c">c </label>
			<br/>你的选择是：
			<span v-if="checkArr.length" v-for="arr of checkArr"> {{arr}} </span>
			
			<br/>
			<input type="radio"  id="aa" value="aa" v-model="picked"/>
			<label for="aa">aa</label>
			<input type="radio"  id="bb" value="bb" v-model="picked"/>
			<label for="bb">bb</label>
			<br/>
			<span>你的选择是：{{picked}}</span>
			
			<br/>
			<select v-model="selected">
				<option disabled value="" >请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
				<option>D</option>
			</select>
			<span>你的选择是：{{selected}}</span>
			
			<br/>
			<select v-model="selectArr" multiple >
				<option disabled value="" >请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
				<option>D</option>
			</select> 你的多选是：
			<span v-if="selectArr.length" v-for="arr of selectArr"> {{arr}} </span>
			
			<br/>
			<select v-model="selected1">
				<option v-for="option of options1"
					:value="option.value">{{option.text}}</option>
			</select>
			<span>你的选择是：{{selected1}}</span>	
			
			<br/>
			<input type="radio" id="ra" v-model="radio1" 
				:value="val1" @change="alert(vm.radio1)"/>
			<label for="ra">单选值绑定</label>
			
			<br/>
			<input type="checkbox" v-model="check1" id="che"
				:true-value="chval1" :false-value="chval2" @change="alert(check1)"/>
			<label for="che">多选值绑定</label>
			
			<br/>
			<select v-model="select1" multiple>
				<option :value="['选择A']">A</option>
				<option :value="['选择B']">B</option>
			</select>列表值绑定选择是：
			<label v-for="sel of select1">{{sel}}</label>
			
			<br/>
			<select v-model="select2">
				<option :value="{op: '选择A'}">A</option>
				<option :value="{op: '选择B'}">B</option>
			</select>列表值绑定选择是：
			<label >{{select2.op}}</label>
			
			<br/><br/>
			<label>v-model修饰符：.lazy、.number、.trim</label>
			<br/>
			<input type="text" v-model.lazy="input1"/>
			<label>输入结果：{{input1}}</label>
			<br/>
			<input type="text" v-model.number="input2"/>
			<label>输入类型：{{typeof input2}}--{{input2}}</label>
			<br/>
			<input type="text" v-model.trim="input3"/>
			<label>输入结果：{{input3}}</label>
			<br/>
			<input type="text" v-model.lazy.number.trim="input4"/><br/>
			<label>输入结果：{{input4}}<br/>输入类型：{{typeof input4}}</label>
		</div>

		<script>
			var test = {
				message1: "",
				message2: "",
				checked: false,
				checkArr: [],
				picked: "",
				selected: "",
				selectArr: [],
				selected1: "js",
				options1: [
					{
						text: "HTML",
						value: "html"
					},
					{
						text: "Javascript",
						value: "js"
					},
					{
						text: "CSS",
						value: "css"
					}
				],
				radio1: false,
				val1: "值1",
				check1: false,
				chval1: "在选",
				chval2: "未选",
				select1: [],
				select2: "",
				input1: "",
				input2: "",
				input3: "",
				input4: ""
			}
			var vm = new Vue({
				el: ".test-08",
				data: test,
				methods: {
				
				},
				//计算属性computed
				computed: {
					
				},
				//侦听属性watch
				watch: {

				}
			});
			
		</script>
	</body>

</html>